<template>
    <!-- 退换补货管理 -->
    <div class="content">
        <div class="body">
            <el-tabs v-model="activeName" @tab-click="handleClick">
                <el-tab-pane :label="item.label" :name="item.id + ''" v-for="item in tabs" :key="item.id" class="bady-wrap">
                    <!-- 全部 -->
                    <div v-if="activeName == '0'" >
                        <div class="search-warp">
                            <mysearch ref="mysearch"
                            :active="activeName"
                            @doReset="doReset"
                            @searchForm="doRefresh"
                            >
                        </mysearch>
                        </div>
                        <div class="btn-box">
                            <el-button type="primary" size="small" @click="uploadNumber">上传物流单号</el-button>
                            <el-button type="danger" size="small">取消申请</el-button>
                        </div>
                        <div class="table-warpper">
                            <mytable ref="mytable" :config="tableconfig">
                                <template v-slot:waybillNo="{ data }">
                                    {{ data.waybillNo }}
                                </template>
                            </mytable>
                        </div>
                    </div>
                    <!-- 待审批 -->
                    <div v-if="activeName == '1'">
                        <div class="search-warp">
                            <mysearch ref="mysearch"
                            :active="activeName"
                            @doReset="doReset"
                            @doQuery="doRefresh"
                            >
                            </mysearch>
                        </div>
                        <div class="btn-box">
                            <el-button type="primary" size="small">上传物流单号</el-button>
                            <el-button type="danger" size="small">取消申请</el-button>
                        </div>
                        <div class="table-warpper">
                            <mytable ref="mytable" :config="tableconfig"></mytable>
                        </div>
                    </div>
                    <!-- 进行中 -->
                    <div v-if="activeName == '2'">
                        <div class="search-warp">
                            <mysearch ref="mysearch"
                                :active="activeName"
                                @doReset="doReset"
                                @doQuery="doRefresh"
                                >
                            </mysearch>
                        </div>
                        <div class="btn-box">
                            <el-button type="primary" size="small">上传物流单号</el-button>
                            <el-button type="danger" size="small">取消申请</el-button>
                        </div>
                        <div class="table-warpper">
                            <mytable ref="mytable" :config="tableconfig"></mytable>
                        </div>
                    </div>
                    <!-- 已作废 -->
                    <div v-if="activeName == '3'">
                        <div class="search-wrap">
                            <mysearch ref="mysearch"
                                :active="activeName"
                                @doReset="doReset"
                                @doQuery="doRefresh"
                                >
                            </mysearch>
                        </div>
                        <div class="btn-box">
                            <el-button type="primary" size="small">上传物流单号</el-button>
                            <el-button type="danger" size="small">取消申请</el-button>
                        </div>
                        <div class="table-warpper">
                            <mytable ref="mytable" :config="tableconfig"></mytable>
                        </div>
                    </div>
                    <!-- 已完成 -->
                    <div v-if="activeName == '4'">
                        <div class="search-wrap">
                            <mysearch ref="mysearch"
                            :active="activeName"
                            @doReset="doReset"
                            @doQuery="doRefresh"
                            >
                            </mysearch>
                        </div>
                        <div class="btn-box">
                            <el-button type="primary" size="small">上传物流单号</el-button>
                            <el-button type="danger" size="small">取消申请</el-button>
                        </div>
                        <div class="table-warpper">
                            <mytable ref="mytable" :config="tableconfig"></mytable>
                        </div>
                    </div>
                </el-tab-pane>
            </el-tabs>

        </div>
        <el-dialog title="上传物流单号" :visible.sync="dialogFormVisible" width="30%" @close="closeDialog">
            <el-form :model="replaceForm" ref="replaceForm" :rules="rulesForm">
                <el-form-item label="退换物流公司" :label-width="formLabelWidth" prop="company">
                <el-input v-model="replaceForm.company" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="退换物流单号" :label-width="formLabelWidth" prop="oddNumbers">
                    <el-input v-model="replaceForm.oddNumbers" autocomplete="off"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="getSumbit('replaceForm')">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>
    import myDate from "@/components/Date/index";
    import mytable from '@/components/table/index';
    import mysearch from '@/components/search/index'
    export default{
        components:{
            myDate,
            mytable,
            mysearch
        },
        data(){
            return{
                activeName: '0',
                isshowbody:false,
                tabs:[
                    {
                        id:0,
                        label:'全部'
                    },
                    {
                        id:1,
                        label:'待审批'
                    },
                    {
                        id:2,
                        label:'进行中'
                    },
                    {
                        id:3,
                        label:'已作废'
                    },
                    {
                        id:4,
                        label:'已完成'
                    },

                ],
                form:{
                    partNumber:'',
                    orderId:'',
                    date:[],
                    waybill:'',
                    type:1,
                    pageNo: 1,
                    pageSize: 10,
                },
                typeList:[
                    {
                        value:1,
                        label:'全部'

                    },
                    {
                        value:2,
                        label:'退货'

                    },
                    {
                        value:3,
                        label:'换货'

                    },
                    {
                        value:4,
                        label:'补货'

                    },
                ],
                tableconfig: {
                    loading: false,
                    isselection: true,
                    ispagination: true,
                    isfixed:true,
                    tabledata: [
                        {
                            id:1,
                            waybillNo:'3333333333',
                            partNumber:'Asd33',
                            type:'333333',
                            status:'3',
                            count:'11233',
                            unitPrice:'33333',
                            money:"232222",
                            currency:'0'
                        },
                        {
                            id:2,
                            waybillNo:'3333333333',
                            partNumber:'Asd33',
                            type:'333333',
                            status:'3',
                            count:'11233',
                            unitPrice:'33333',
                            money:"232222",
                            currency:'1'
                        }
                    ],
                    isindex: false,
                    thead: [
                    { sort: null, label: '订单号', prop: 'id', width: 100 },
                    { sort: null, label: '运单号', prop: 'waybillNo', width: 120,type: 'slot' },
                    { sort: null, label: '型号', prop: 'partNumber', width: 250,type: 'slot' },
                    { sort: null, label: '类型', prop: 'type', width: 100 },
                    { sort: null, label: '状态', prop: 'status', width: 120 },
                    { sort: null, label: '售后数量', prop: 'count', width: 120},
                    { sort: null, label: '单价', prop: 'unitPrice', width: 120,type: 'slot' },
                    { sort: null, label: '售后金额', prop: 'money', width: 120,type: 'slot' },
                
                    { sort: null, label: '币种', prop: 'currency', width: 150 ,type: 'slot'},
                    // { sort: null, label: '最小起订量', prop: 'moq', width: 100 },
                    // { sort: null, label: '最小包装量', prop: 'mpq', width: 100 },
                    // { sort: null, label: '包装', prop: 'packing', width: 100 ,type: 'slot'},
                    // { sort: null, label: '库存所在地', prop: 'inventoryHome',width: 150,type: 'slot'},   
                    // { sort: null, label: '创建人', prop: 'createUser', width: 200},
                    // { sort: null, label: '更新日期', prop: 'modifyDate', width: 150},
                    // { sort: null, label: '创建日期', prop: 'createDate',width: 150 },  
                    // { sort: null, label: '标准型号匹配', prop: 'bzkPartNumber',width: 150 },  
                    // { sort: null, label: '标准品牌匹配', prop: 'bzkBrand',width: 150 },  
                    ],
                    // checkedAll: false, //全选所有
                    checkedPage: false, //全选本页
                    currentpage: 1,
                    pagesize: 1,
                    total: 3,
                },
                dialogFormVisible:false,
                replaceForm:{
                    company:'',
                    oddNumbers:"",
                },
                rulesForm: {
                    company: [
                        { required: true, message: '请选择物流公司', trigger: 'blur' },
                        // { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
                    ],
                    oddNumbers: [
                        { required: true, message: '请填写物流单号', trigger: 'blur' },
                        // { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
                    ],
                },
                tabCount:'0',
                formLabelWidth:'120px'
            }
        },
        methods:{
            handleClick(tab, event) {
                // console.log(tab, event);
            },
            getCreateDate(date){
                this.form.createDate = date;
            },
            getShow(){
                this.isshowbody = !this.isshowbody;
            },
            // 重置搜索
            doReset(data,active) {
                // console.log(data);
                // Object.keys(data).map(x => {
                //     data[x] = '';
                // });
                this.tabCount = active;
                data.partNumber='';
                data.orderId='';
                data.waybill='';
                data.date=[];
                data.type=1;
                data.pageNo=1;
                data.pageSize=10;
                this.$message({
                    message: '已重置',
                    type: 'success',
                });
                this.doRefresh();
                },
        // 刷新
        doRefresh(data) {
            // console.log(data,'333333333333');
            //页码从第一页开始
            this.tableconfig.currentpage = 1;
            //表格回到顶部
            this.$refs.mytable[this.tabCount].$emit('handleGoTop');
            // this.doQuery();
        },
        //搜索
            // 上传物流单号
            uploadNumber(){
                this.dialogFormVisible = true;
            },
            getSumbit(formName) {
                this.$refs[formName].validate((valid) => {
                if (valid) {
                    // alert('submit!');
                } else {
                    console.log('error submit!!');
                    return false;
                }
                });
            },
            closeDialog(){
                this.$refs['replaceForm'].resetFields();
            },
        }
    }
</script>
<style lang="scss" scoped>
.content {
    font-size: 16px;
    background: #FFFFFF;
    border-radius: 11px;
    .body{
        .bady-wrap{
            padding: 0 10px;
        }
        .el-col-4{
            text-align: right;

        }
        .btn-box{
            margin: 10px 20px 10px;
        }
        ::v-deep .el-input{
            width: 19% !important;
        }
       
            .search-box{
                .top{
                    display: flex;
                }
                
            }
            // display: flex;
       
        
    }
    .dialog-footer{
        text-align: center;
    }
}

</style>